<!DOCTYPE html>
<html>
<head>
	<title>登录</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta charset="utf-8">
	<link rel="stylesheet" href="../css/main.css">
	<script src="../script/vue.js"></script>
	<script src="../script/axios.js"></script>
	<script src="../script/main.js"></script>
	<script src="../script/TCaptcha.js"></script>
</head>
<body>
	<div class="app" id="app">
        <img class="music" :class="music_play?'music2':''" @click="music_play=!music_play" src="../image/player.png">
        <div class="bg">
            <img src="../image/bg0.jpg">
        </div>
        <div class="form">
            <div class="form-title">
                <img src="../image/login.png">
                <img class="back" @click="open_index" src="../image/back.png">
            </div>
            <div class="form-data">
                <div class="form-data-bg">
                    <img src="../image/bg1.png">
                </div>
                <div class="form-item">
                    <label class="text">账户</label>
                    <input type="text" v-model="account" placeholder="请输入手机号、用户名或邮箱">
                </div>
                <div class="form-item">
                    <label class="text">密码</label>
                    <input type="password" v-model="password" placeholder="请输入密码">
                </div>
                <div class="form-item">
                    <input type="checkbox" class="agree remember" v-model="remember">
                    <label><span class="agree_text ">记住密码，下次免登录</span></label>
                </div>
                <div class="form-item">
                    <img class="commit" @click="show_captcha" src="../image/commit.png">
                </div>
                <div class="form-item">
                    <p class="toreg" @click="open_register">立即注册</p>
                    <p class="tofind">忘记密码</p>
                </div>
            </div>
        </div>
	</div>
	<script>
	apiready = function(){
		Vue.prototype.game = new Game("../mp3/bg1.mp3");
		new Vue({
			el:"#app",
			data(){
				return {
                    account: "13928835905",
                    password: "123456",
                    remember: true,              // 是否保存登陆状态，下次免登陆
                    music_play:true,
				}
			},
			watch:{
                music_play(){
                    if(this.music_play){
                        this.game.play_music("../mp3/bg1.mp3");
                    }else{
                        this.game.stop_music();
                    }
                }
            },
            methods:{
                open_register(){
                    this.game.goFrame("register","./register.html");
                },
                open_index(){
                    this.game.outWin();
                },
				show_captcha(){
					// 显示验证码
					var captcha1 = new TencentCaptcha(this.game.config.app_id, (res)=>{
						if(res.ret==0){
							// 验证码验证成功,返回4个数据,ret,appid,ticket和randstr
							this.loginhandle(res); // 提交登录数据
						}
					});
					captcha1.show(); // 显示验证码
				},
                loginhandle(res){
                    // 登陆处理
                    this.game.play_music('../mp3/btn1.mp3');
                    // 验证数据
					if(this.account.length<1 || this.password.length<1){
						this.game.tips("账号或者密码不能为空！");
						return false;
					}
                    // 提交获取token
					this.axios.post("",{
						"jsonrpc": "2.0",
						"id": this.game.uuid(),
						"method": "Users.login",
						"params": {
							"account": this.account,
							"password": this.password,
							"ticket": res.ticket,
							"randstr": res.randstr,
						}
					}).then(response=>{
						if(response.data.result.errno === 0){
							// 删除上次登录遗留的token数据
							this.game.delfs(["access_token","refresh_token"]);
							this.game.deldata(["access_token","refresh_token"]);

							// 保存认证令牌
							if(this.remember){
								// 记住登陆状态
								this.game.setfs({
									'access_token': response.data.result.access_token,
									'refresh_token': response.data.result.refresh_token
								});
							}else{
								// 不记住登陆状态
								this.game.setdata({
									'access_token': response.data.result.access_token,
									'refresh_token': response.data.result.refresh_token
								});
							}

							// 注册成功!
							api.confirm({
							    title: '系统提示',
							    msg: '登陆成功',
							    buttons: ['返回首页', '个人中心']
							}, (ret, err)=>{
							    if(ret.buttonIndex == 1){
									// 跳转到首页
									this.game.goWin("root", "./index.html");
								}else{
									// 跳转到个人中心
									this.game.goWin("user","./user.html");
								}
								// 2秒后关闭当前窗口
								setTimeout(() => {
									this.game.outWin();
								}, 2000);
							});

						}else{
                            this.game.tips(response.data.result.errmsg);
                        }

					}).catch(error=>{
						this.game.print(error);
					});
                }
            }
		})
	}
	</script>
</body>
</html>